<script setup>

import {onMounted, ref} from 'vue';
import dateUtil from '@/utils/dateUtil';
import chartApi from "@/api/chart.js";
import * as echarts from 'echarts'

const chartRef = ref()
// 加载完成后再进行
onMounted(()=>{
    const myChart = echarts.init(chartRef.value);
    //本周的第一天
    const date = dateUtil.getMonday();
    //本周的每一天
    const days = dateUtil.getWeekDays();

    // 绘制图表
    let option = {
        title: {
            text: '课程预约人数对比图',
            textStyle: {
                color: '#161D23',
                fontWeight: 'bold',
                fontSize: '16px',
            },
            left: '10px',
            top: '10px',
        },
        legend: {
            top: '20px',
            right: '20px',
        },
        grid: {
            left: '3%',
            right: '30px',
            bottom: '3%',
            top: '60px',
            containLabel: true
        },
        tooltip: {},
        yAxis: {
            type: 'value',
        },
        xAxis: {
            axisLabel: {color: '#161D23'},
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],    // 显示标题
        },
        series: [
            {
                name: '会员增长',
                type: 'bar',
                data: [],   // 显示数据
                label: {
                    show: true,
                    color: '#50CEFF',
                    position: 'top',
                },
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            },
            {
                name: '预约人数',
                type: 'bar',
                data: [],   // 显示数据
                label: {
                    show: true,
                    color: '#50CEFF',
                    position: 'top',
                },
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    }

    chartApi.selectUserCount(date).then(result => {
        const data = new Array(7).fill(0);
        for (let i=0; i<days.length; i++){
            for (let item of result.data){
                if (item.day == days[i]) {
                    data[i] = item.count;
                }
            }
        }

        option.series[0].data = data;
        myChart.setOption(option);
    });

    chartApi.selectReserveCount(date).then(result => {
        const data = new Array(7).fill(0);

        for (let i=0; i<days.length; i++){
            for (let item of result.data){
                if (item.day == days[i]) {
                    data[i] = item.count;
                }
            }
        }

        option.series[1].data = data;
        myChart.setOption(option);
    });
});

</script>

<template>
    <div ref="chartRef" style="width: 100%; height: 100%">
    </div>

</template>

<style>

</style>